
// http://124.223.14.236:8060/admin/ydd_cate/add
$(function () {
  const form = layui.form

  let options = {
    catename: '',
    page: 1,
    limit: 5   // 分类名称
  }
  //渲染列表===========================================
  render()

  function render() {

    // axios.get('/ydd_cate/list',{
    //   params:option
    // })
    axios({
      method: 'get',
      url: '/ydd_cate/list',
      // data: {post请求参数},
      params:options,
      headers: { 'x-token': localStorage.getItem('x-token') }
    }).then(({ data: { data: { data, count } } }) => {
      // console.log(limit);
      const htmlstr = data.map(({ id, catename, icon, sort_num }, i) => {
        // console.log(id);
        return `    <tr>
          <td>${i + 1}</td>
          <td>${id}</td>
          <td>${catename}</td>
          <td>${icon}<i class="fa ${icon}" id="tu"></i></td>
          <td>${sort_num}</td>
          <td>
          <ul class="right handler">
              <li class="change"> 
                  <i class="layui-icon layui-icon-edit btn-edit" data-id=${id}></i>
              </li>
              <li class="del">
                  <i class="layui-icon layui-icon-delete btn-delete" data-id=${id}></i>
              </li>
          </ul>
          </td>
        /tr>`
      }).join('')
      $('tbody').html(htmlstr)
      //处理分页，用layui提供的插件   

      
      layui.use('laypage', function () {
        const laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
          elem: 'page',
          count: count,//数据总数，从服务端得到6
          curr: options.page,
          limit: options.limit,
          limits: [5, 10, 15, 20, 30],// 如果 layout 参数开启了 limit，则会出现每页条数的select选择框
          layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],//自定义排版,页面显示元素
          // 分页器的每项值改动都会调用这个回调函数
          jump: function (obj, first) {// obj 为每次分页器改变后的新值,
            // first来控制是过滤只要分页器直接改变时才执行的代码
            options.page = obj.curr
            options.limit = obj.limit
            // console.log(obj.limit);
            // console.log(option.limit);
            if (!first) {
              render()
            }
          }
        })
      })
    })
  }

  // ========== 搜索然后渲染有的页面  ==========
  $('#sousuo').on('submit', function (e) {
    // alert('弹出')
    e.preventDefault()
    const tagname = $('#tags').val()
    options.catename = tagname
    options.page = 1
    render()
  })
  // ========== 重置功能  ==========
  $('.reset').on('click', () => {
    const obj = {
      page: 1,
      limit: 10,
      catename: ''
    }
    Object.assign(option, obj)
    // $('.search')[0].reset()
    render()
  })
  // ========== 点击按钮 显示和隐藏上方文本框  ==========
  $('#close').on('click', function () {
    $('.search').hide()
    $('#close').hide()
    $('#open').show()
  })
  $('#open').on('click', function () {
    $('.search').show()
    $('#open').hide()
    $('#close').show()
  })
  // ========== 刷新功能 ==========
  $('#refresh').on('click', function () {
    self.location.reload()
  })
  //  ========== 点击新增分类按钮，显示弹层  ==========
  let addFormStr = `
<form class="layui-form" id="form-add" lay-filter="gezi">

    <!-- 第一行 分类名称 -->
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
        <input type="text" name="catename" required  lay-verify="required" placeholder="请输入分类名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 第二行 图标 -->
    <div class="layui-form-item">
        <label class="layui-form-label">图标class</label>
        <div class="layui-input-block">
        <input type="text" name="icon" required  lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 第三行 排序大小 -->
    <div class="layui-form-item">
        <label class="layui-form-label ct" style="text-align:right">排序大小</label>
        <div class="layui-input-block">
            
            <input type="text" name="sort_num" value="10" autocomplete="off" class="layui-input fl" id="quanzhong">
           
        </div>
    </div>
    <!-- 第四行 按钮 -->
    <div class="layui-form-item">
        <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>`
  let layerIndex;
  $('#add_cate').on('click', function () {
    // 弹出一个添加分类信息的层
    layerIndex = layer.open({
      type: 1, // 层的类型，1表示页面层
      area: ['864px', '348px'],// 宽度高度
      title: '添加分类',// 标题
      content: addFormStr // 内容
    })
  })
  // ========== 新增分类功能 - 发送axios请求 ==========
  // 表单form是动态创建需要用到事件委托
  $('body').on('submit', '#form-add', function (e) {
    // 阻止默认行为
    e.preventDefault();
    // 获取写入的值
    let data = $(this).serialize()
    // console.log(data);
    axios.post('/ydd_cate/add', data).then(res => {
      // console.log(res);
      if (res.status !== 200) {
        // 提示失败
        return layer.msg('添加失败！', { icon: 5, time: 1000 })
      }
      // 提示失败
      layer.msg('添加成功！', { icon: 1, time: 1000 })
      // 关闭弹出层
      layer.close(layerIndex)
      // 重新渲染
      render()
    })
  })

    //  ========== 点击编辑按钮，显示弹层  ==========
    let editFormStr = `
                <form class="layui-form" id="form-edit" lay-filter="editForm">
                    <input type="hidden" name="default_data">
                    <input type="hidden" name="id">
                    <!-- 第一行 分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                        <input type="text" name="catename" required  lay-verify="required" placeholder="请输入分类名" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <!-- 第二行 图标 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">图标class</label>
                        <div class="layui-input-block">
                        <input type="text" name="icon" required  lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 第三行 排序大小 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label ct" style="text-align:right">排序大小</label>
                        <div class="layui-input-block">
                           
                            <input type="text" name="sort_num" value="10" autocomplete="off" class="layui-input fl" id="quanzhong">
                          
                        </div>
                    </div>
                    <!-- 第四行 按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
            </form>`
    $('tbody').on('click', '.btn-edit', function () {
        // 弹出一个修改文章分类信息的层
        layerIndex = layer.open({
            type: 1,// 层的类型，1表示页面层
            area: ['864px', '348px'],// 宽高
            title: '修改分类', // 标题
            content: editFormStr // 内容
        })

        // ========== 编辑功能 - 发送axios请求 ==========
        // 获取到当前按钮上的自定义属性 data-id 的值
        const id = $(this).attr('data-id')
        // console.log(id);
        axios.get('/ydd_cate/rowInfo?id=' + id).then(({ data: { data } }) => {
            // console.log(data);
            const form = layui.form
            form.val("editForm", data)
        })
    })
  //  ========== 编辑修改内容  ==========
  $('body').on('submit', '#form-edit', function (e) {
    // 阻止默认行为
    e.preventDefault()

    const data = $(this).serialize()
    // console.log(data)
    axios.post('/ydd_cate/update', data).then(({ data: { errno, errmsg } }) => {
        if (errno !== 0) {
            // 提示失败
            return layer.msg(errmsg, { icon: 5, time: 1000 })
        }
        // 提示成功
        layer.msg('修改成功！', { icon: 1, time: 1000 })
        // 关闭弹出层
        layer.close(layerIndex)
        // 重新渲染
        render()
    })
})
//权重=================================
    // ======= 删除功能  =======
    $('tbody').on('click', '.btn-delete', function () {
      const layer = layui.layer

      // 接口中需要携带id => 给按钮添加自定义属性
      // 获取到当前编辑按钮上使用自定义属性data-id存储的Id的值，需要获取到，发送ajax请求获取到数据
      let id = $(this).data('id')
      // 提示用户是否要删除
      layer.confirm('确认删除此分类吗？', { icon: 3, title: '删除分类' }, () => {
          axios.get('/ydd_cate/del?id=' + id).then(({ data: { errno, errmsg } }) => {
              if (errno !== 0) {
                  // 提示失败
                  return layer.msg(errmsg, { icon: 5, time: 1000 })
              }
              // 1. 弹框提示成功
              layer.msg('删除分类成功！', { icon: 1, time: 1000 })
              // 2. 关闭弹出层
              layer.close(layerIndex)
              // 3. 重新发送ajax获取最新分类数据
              render()
          })
      });
  })
})

